<template>
  <div>
    <el-row class="elRow" :gutter="30" type="flex" justify="start">
      <el-col :span="6">
        <span class="large">{{ $t('market.storageUnit') }}<!--采购单位--></span>
        <el-input
          v-model.trim="information.fpurchaseUnit"
          size="mini"
          class="input-width"
          disabled
        />
      </el-col>
      <el-col :span="6">
        <span class="large">{{ $t('market.storageprice') }}<!--采购计价单位--></span>
        <el-input
          v-model.trim="information.fpurchasepriceUnit"
          size="mini"
          class="input-width"
          :disabled="detailDisabled"
        >
          <i
            slot="suffix"
            class="el-input__icon el-icon-search"
            @click="unitVisabled = true"
          />
        </el-input>
      </el-col>
      <el-col :span="6">
        <span class="large">{{ $t('market.supplier') }}<!--供应商--></span>
        <el-autocomplete
          v-model.trim="information.fdefaultvendor"
          highlight-first-item
          popper-class="my-autocomplete"
          :fetch-suggestions="querySearch9"
          size="mini"
          class="input-width"
          :disabled="detailDisabled"
          @focus="handleSupplier"
          @select="supplierSelectRow"
        >
          <i
            slot="suffix"
            class="el-input__icon el-icon-search"
            @click="handleSuppliers"
          />
          <template slot-scope="{ item }">
            <div class="name">{{ item.fname }}</div>
          </template>
        </el-autocomplete>
      </el-col>
      <el-col :span="6">
        <span class="large" />
        <el-checkbox v-model="information.fpurchasecheck">{{ $t('market.purchasecheck') }}<!--是否采购检验--></el-checkbox>
      </el-col>
    </el-row>
    <!--  供应商弹窗-->
    <jc-popup
      v-model="supplierName"
      :dialog-title="$t('menu.supplierList')"
      :popup-title="popupTitle"
      :open-dialog="openSupplier"
      @closeDialog="closeDialog"
      @emptyForm="emptyForm"
      @handleSearch="searchSupplier"
    >
      <template v-slot:content>
        <div>
          <jc-table
            serial
            :table-data="supplierData"
            :table-header="supplierHeader"
            table-height="500px"
            @clickRow="supplierSelectRow"
          />
        </div>
      </template>
      <template v-slot:pagination>
        <jc-pagination
          v-show="supplierPagination.total > 0"
          :total="supplierPagination.total"
          :page.sync="supplierPagination.pageNum"
          :limit.sync="supplierPagination.pageSize"
          @pagination="handleSuppliers"
        />
      </template>
    </jc-popup>
    <baseUnit v-if="unitVisabled" :msg="false" @unit="selBaseunit" />
  </div>
</template>

<script>
import {
  queryTBdSupplier
} from '@/api/purchaseManagement/createPurchasePrice'
import jcPopup from '@/views/basic/createMateriel2/components/Popup'
import autocomplete from '@/views/market/marketManage/createMarkerOrder/components/autocomplete'

export default {
  name: 'Index',
  components: {
    jcPopup,
    baseUnit: () => import('@/views/basic/createMateriel2/components/baseUnit')
  },
  mixins: [autocomplete],
  props: {
    unit: {
      type: Object,
      default: () => {
        return {}
      }
    },
    information: {
      type: Object,
      default: () => {
        return {}
      }
    },
    detailDisabled: {
      type: Boolean,
      default: false
    },
    detailShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      unitVisabled: false,
      funit: 'SX_V_BASEUNIT', // 采购计价单位
      quotaMethod: [], // 配额方式
      // 供应商列表
      supplierData: [],
      // 供应商表头
      supplierHeader: [
        { label: this.$t('shop.fnumber'), prop: 'fnumber' },
        // { label: '使用组织', prop: 'fuseorg' },
        { label: this.$t('market.supplier'), prop: 'fname' },
        { label: this.$t('market.primaryGroup'), prop: 'fprimaryGroup' }
      ],
      // 供应商分页
      supplierPagination: {
        total: 0, // 总条目
        pageNum: 1, // 当前页
        pageSize: 20 // 每页显示多少条数据
      },
      supplierName: '', // 供应商弹窗关键词
      dialogTitle: '', // 弹窗标题
      popupTitle: '', // 查询条件文本
      openSupplier: false // 供应商弹窗
    }
  },
  watch: {
    unit(ev) {
      this.$set(this.information, 'fpurchaseUnitId', ev.fid)
      this.$set(this.information, 'fpurchaseUnit', ev.fname)
      this.$set(this.information, 'fpurchasepriceUnitId', ev.fid)
      this.$set(this.information, 'fpurchasepriceUnit', ev.fname)
    }
  },
  methods: {
    selBaseunit(ev) {
      if (ev.funitid) {
        this.information.fpurchasepriceUnitId = ev.funitid
        this.information.fpurchasepriceUnit = ev.fname
        this.information.fpurchaseUnit = ev.fname
        this.information.fpurchaseUnitId = ev.funitid
      }
      this.unitVisabled = false
    },
    // 供应商列表
    async handleSuppliers() {
      this.openSupplier = true
      const { data: RES } = await queryTBdSupplier({
        ...this.supplierPagination,
        fname: this.supplierName
      })
      const { array, search, total } = RES
      this.supplierData = array
      this.popupTitle = search
      this.supplierPagination.total = total
    },
    // 双击供应商弹窗
    supplierSelectRow(item) {
      const { fname, fsupplierId } = item
      this.information.fdefaultvendor = fname
      this.information.fsupplierId = fsupplierId
      this.openSupplier = false
    },
    // 弹窗关闭事件
    closeDialog() {
      this.openSupplier = false
      this.supplierPagination.pageNum = 1
    },
    // 清空弹窗表单
    emptyForm() {
      this.supplierName = ''
      this.warehouseName = ''
    },
    // 供应商弹窗搜索
    searchSupplier() {
      this.supplierPagination.pageNum = 1
      this.handleSuppliers()
    }
  }
}
</script>

<style scoped lang="scss">
.elRow {
  display: flex;
  flex-wrap: wrap;
  .large {
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 12px;
    font-weight: 700;
  }
  .warehouse::before {
    content: '*';
    padding-right: 2px;
    color: red;
  }
  .input-width {
    width: 185px;
  }
  .el-icon-search {
    cursor: pointer;
  }
}
.el-table ::v-deep .el-table__body-wrapper {
  height: 480px;
}
</style>
